<div id="app">
  <h1>{{username}}</h1>
  <user class="username" :user="username" @change-user="username=$event"></user>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
  const User = {
    props: ['user'],
    events: ['change-user'],
    template: `<div>{{user}} <button @click="updateUser">update</button></div>`,
    methods: {
      updateUser() {
        this.$emit('change-user', this.user + '!')
      }
    }
  }

  Vue.createApp({
    components: { User },
    data() {
      return { username: 'hunger' }
    }
  }).mount('#app')
</script>